<!--弹出对话框-->
<template>
  <!--     弹出框弹出框-->
  <el-dialog :visible.sync="dialogVisible" center width="600px">
    <div class="dialog_content">
      <div class="dialog_title">
        {{
          type === 2
            ? "修改仓库数据"
            : type === 1
            ? "新增仓库数据"
            : type === 0
            ? "查看商品"
            : ""
        }}
      </div>
      <el-form
        ref="dialogFrom"
        :label-width="formLabelWidth"
        :model="dialogDate"
        :rules="dialogRules"
      >
        <el-form-item label="日期" prop="updateTime">
          <el-date-picker
            v-model="dialogDate.updateTime"
            placeholder="选择日期时间"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          :label-width="formLabelWidth"
          label="仓库名称"
          prop="warehouseName"
        >
          <el-input
            v-model="dialogDate.warehouseName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label-width="formLabelWidth"
          label="仓库地址"
          prop="warehouseAddress"
        >
          <el-input
            v-model="dialogDate.warehouseAddress"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label-width="formLabelWidth"
          label="仓库联系电话"
          prop="phone"
        >
          <el-input v-model="dialogDate.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="状态" prop="status">
          <el-input v-model="dialogDate.status" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          :label-width="formLabelWidth"
          label="绑定管理员"
          prop="admin"
        >
          <el-input v-model="dialogDate.admin" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="dialog_footer">
      <el-button v-if="type === 1" type="primary" @click="dialogAdd"
        >确 定</el-button
      >
      <el-button v-if="type === 2" type="primary" @click="dialogUpdate"
        >确 定</el-button
      >
      <el-button @click="offDialog">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: {
    // 表单数据
    dialogDate: {
      type: Object,
      default: () => ({
        id: "",
        updateTime: "", //更新时间
        warehouseName: "", // 仓库名
        warehouseAddress: "", // 仓库地址
        phone: "", // 仓库联系电话
        status: "", // 状态
        admin: "",
      }), // 绑定管理员
    },
  },
  data() {
    return {
      formLabelWidth: "120px", // 表单文字宽度
      dialogVisible: false, // 弹窗控制变量
      type: 0, // 判断是新增还是修改,1 表示新增，2 表示修改
      // 校验表单
      dialogRules: {
        updateTime: [
          { required: true, message: "请选择日期", trigger: "change" },
        ],
        warehouseName: [
          { required: true, message: "请输入仓库名称", trigger: "blur" },
        ],
        warehouseAddress: [
          { required: true, message: "请输入仓库地址", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入仓库联系电话", trigger: "blur" },
        ],
        status: [{ required: true, message: "请输入状态", trigger: "blur" }],
        admin: [
          { required: true, message: "请输入绑定管理员", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    // 修改仓库数据
    dialogUpdate() {
      let that = this;
      // 校验
      this.$refs.dialogFrom.validate((valid) => {
        if (valid) {
          that.$emit("updateList", that.dialogDate);
          // 关闭弹窗
          that.dialogVisible = false;
        } else {
          return false;
        }
      });
    },
    // 新增
    dialogAdd() {
      let that = this;
      // 校验
      this.$refs.dialogFrom.validate((valid) => {
        if (valid) {
          // 将数据传递至父组件
          that.$emit("addList", JSON.stringify(that.dialogDate));
          // 关闭弹窗
          that.offDialog("dialogFrom");
        } else {
          return false;
        }
      });
    },

    // 结束清空弹窗数据，关闭弹窗
    offDialog() {
      // 回复初始值
      this.$refs.dialogFrom.resetFields();
      // 关闭弹窗
      this.dialogVisible = false;
    },

    // 开启弹窗，判断是新增还是修改事件
    showDialog(type) {
      // 判断是新增还是修改,1 表示新增，2 表示修改
      this.type = type;
      // 开启弹窗
      this.dialogVisible = true;
    },
  },
};
</script>
<style scoped>
/deep/ .el-dialog__header {
  padding: 0;
}

/deep/ .el-dialog__body,
/deep/ .el-dialog--center .el-dialog__body {
  padding: 0;
}
</style>
